<template>
  <a-form ref="formRef" :model="formData" class="form" :label-col-props="{ span: 8 }" :wrapper-col-props="{ span: 16 }">
    <a-form-item
      field="email"
      :label="$t('userSetting.basicInfo.form.label.email')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.error.email.required'),
        },
      ]"
    >
      <a-input v-model="formData.email" :placeholder="$t('userSetting.basicInfo.placeholder.email')" />
    </a-form-item>
    <a-form-item
      field="nickname"
      :label="$t('userSetting.basicInfo.form.label.nickname')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.error.nickname.required'),
        },
      ]"
    >
      <a-input v-model="formData.nickname" :placeholder="$t('userSetting.basicInfo.placeholder.nickname')" />
    </a-form-item>
    <a-form-item
      field="countryRegion"
      :label="$t('userSetting.basicInfo.form.label.countryRegion')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.error.countryRegion.required'),
        },
      ]"
    >
      <a-select v-model="formData.countryRegion" :placeholder="$t('userSetting.basicInfo.placeholder.area')">
        <a-option value="China">中国</a-option>
      </a-select>
    </a-form-item>
    <a-form-item
      field="area"
      :label="$t('userSetting.basicInfo.form.label.area')"
      :rules="[
        {
          required: true,
          message: $t('userSetting.form.error.area.required'),
        },
      ]"
    >
      <a-cascader
        v-model="formData.area"
        :placeholder="$t('userSetting.basicInfo.placeholder.area')"
        :options="[
          {
            label: '北京',
            value: 'beijing',
            children: [
              {
                label: '北京',
                value: 'beijing',
                children: [
                  {
                    label: '朝阳',
                    value: 'chaoyang',
                  },
                ],
              },
            ],
          },
        ]"
        allow-clear
      />
    </a-form-item>
    <a-form-item field="address" :label="$t('userSetting.basicInfo.form.label.address')">
      <a-input v-model="formData.address" :placeholder="$t('userSetting.basicInfo.placeholder.address')" />
    </a-form-item>
    <a-form-item
      field="profile"
      :label="$t('userSetting.basicInfo.form.label.profile')"
      :rules="[
        {
          maxLength: 200,
          message: $t('userSetting.form.error.profile.maxLength'),
        },
      ]"
      row-class="keep-margin"
    >
      <a-textarea v-model="formData.profile" :placeholder="$t('userSetting.basicInfo.placeholder.profile')" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" @click="validate">
          {{ $t('userSetting.save') }}
        </a-button>
        <a-button type="secondary" @click="reset">
          {{ $t('userSetting.reset') }}
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { BasicInfoModel } from '@/api/user-center'

const formRef = ref<FormInstance>()
const formData = ref<BasicInfoModel>({
  email: '',
  nickname: '',
  countryRegion: '',
  area: '',
  address: '',
  profile: '',
})
const validate = async () => {
  const res = await formRef.value?.validate()
  if (!res) {
    // do some thing
    // you also can use html-type to submit
  }
}
const reset = async () => {
  await formRef.value?.resetFields()
}
</script>

<style scoped lang="less">
.form {
  width: 540px;
  margin: 0 auto;
}
</style>
